<template>
  <div class="search_group">
    <PageHeader></PageHeader>
    <div class="page-main">
      <div class="page-body">
        <GroupCard title="小组搜索" :isHasSearch="true" @mysearch="searchChange($event)">
          <nav class="my-navbar">
            <ul class="navbar-list w-100 d-flex justify-content-center">
              <li class="nav-item" :class="activeIndex === index ? 'active':''" v-for="(item,index) in groupList.data"
                :key="item._id" @click="clickHandler(item._id,index)">
                {{item.name}}
              </li>
            </ul>
          </nav>
          <div class="group-container w-100">
            <div class="hasData" v-if="(isSearch ? groupSearchList.data.length: groupShowList?.length)">
              <div class="col-lg-3 group-item d-flex" v-for="item in (isSearch ? groupSearchList.data: groupShowList)"
                :key="item._id">
                <a href="" :title="item.title">
                  <img src="../../assets/default.jpg" alt="" lazyload="true" :data-original="item.image">
                </a>
                <div class="group-item-right">
                  <p class="fs-md group-item-title">
                    <a href="" class="font-black" :title="item.title">{{item?.title}}</a>
                  </p>
                  <p class="fs-xs group-item-info">
                    <span>{{item.number}}个成员</span>
                    <span>{{item.topic}}个话题</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="group-empty" v-else>
              <p>暂无小组信息</p>
            </div>
          </div>
        </GroupCard>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
import PageHeader from '../PageHeader'
import PageFooter from '../PageFooter'
import GroupCard from '../GroupCard'
import { getAllGroupList, getSearchGroupList } from '../../api'
import { ref, reactive, onMounted, computed, toRaw, getCurrentInstance } from 'vue'
export default {
  components: {
    PageHeader, PageFooter, GroupCard
  },
  setup (props, ctx) {
    const activeIndex = ref(0)
    const groupList = reactive({
      data: []
    })
    const groupSearchList = reactive({
      data: []
    })
    const cateId = ref('3333336666vv22222')
    const isSearch = ref(false)
    const searchValue = ref('')
    const instance = getCurrentInstance()
    console.log(instance)
    onMounted(async () => {
      const groupRes = await getAllGroupList()
      groupList.data = groupRes.data
      console.log(instance)
      setTimeout(() => {
        lazyload()
      })
      window.addEventListener('scroll', lazyload)
    })
    const groupShowList = computed(() => {
      return (groupList.data)[activeIndex.value]?.GroupList
    })
    console.log(groupShowList)
    // 处理导航栏点击事件
    function clickHandler (id, index) {
      activeIndex.value = index
      cateId.value = id
      if (searchValue.value) {
        getSearchGroupList(cateId.value, searchValue.value).then(res => {
          isSearch.value = true
          groupSearchList.data = res.data
          console.log(groupSearchList.data.length)
        }).catch(err => {
          console.log(err)
        })
      }
      setTimeout(() => {
        lazyload()
      })
    }
    function searchChange (inputValue) {
      console.log(cateId.value, inputValue)
      searchValue.value = inputValue
      getSearchGroupList(cateId.value, inputValue).then(res => {
        isSearch.value = true
        groupSearchList.data = res.data
        console.log(groupSearchList.data.length)
        setTimeout(() => {
          lazyload()
        })
      }).catch(err => {
        console.log(err)
      })
      // const regexp = new RegExp(`${inputValue}`, 'g')
      // groupSearchList.data = (groupList.data)[activeIndex.value]?.GroupList.find(v => regexp.test(v.title))
    }

    // 图片懒加载
    function lazyload () {
      const scrollY = document.documentElement.scrollTop
      const offsetHeight = document.documentElement.offsetHeight
      const imgs = document.querySelectorAll('img[data-original][lazyload]')
      console.log(1)
      imgs.forEach(item => {
        if (item.dataset.original === '') {
          return
        }
        const rect = item.getBoundingClientRect()
        if (rect.bottom >= 0 && rect.top < scrollY + offsetHeight) {
          const img = new Image()
          img.src = item.dataset.original
          // console.log(img.src)
          img.onload = function() {
            item.src = img.src
          }
          item.removeAttribute('data-original')
          item.removeAttribute('lazyload')
        }
      })
    }

    return { groupList, activeIndex, clickHandler, groupShowList, searchChange, groupSearchList, isSearch }
  }
}
</script>

<style lang="scss" scoped>
.search_group {
  background-color: #f4f6f8;
  .page-main {
    margin: 30px auto 80px;
    .my-navbar {
      margin: 10px 0;
      .navbar-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        .nav-item {
          box-sizing: border-box;
          margin: 0 10px 5px;
          padding: 6px 12px;
          border: 1px solid #fff;
          cursor: pointer;
          &:hover {
            background-color: #15c288;
            border-radius: 2px;
            border: 1px solid #15c288;
            color: #fff;
          }
          &.active {
            background-color: #15c288;
            border-radius: 2px;
            border: 1px solid #15c288;
            color: #fff;
          }
        }
      }
    }
    .group-container {
      .hasData {
        display: flex;
        flex-wrap: wrap;
        .group-item {
          margin-bottom: 15px;
          img {
            width: 60px;
            height: 60px;
          }
          .group-item-right {
            margin-left: 10px;
            .group-item-title {
              a {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 10px;
              }
            }
            .group-item-info {
              span {
                color: #919191;
                &:first-child {
                  margin-right: 8px;
                }
              }
            }
          }
        }
      }
      .group-empty {
        padding: 20px 0 30px;
        text-align: center;
      }
    }
  }
}
</style>
